<template>
    <div class="app-container">

      <div class="trading_head">
        <div class="head_two">
          <p>
            订单总金额（收入，元）
          </p>
          <div class="down">
            <div class="down_right">{{dataTool.orderincometotal}}</div>
            <div class="down_left">
              <p>昨日订单金额 &nbsp;&nbsp;{{dataTool.orderincomeyesterday}}</p>
              <p>今日订单金额 &nbsp;&nbsp;{{dataTool.orderincometoday}}</p>
            </div>
          </div>
        </div>

          <div class="head_two">
            <p>
              提现总金额（支出，元）
            </p>
            <div class="down">
              <div class="down_right">{{dataTool.embodytotal}}</div>
              <div class="down_left">
                <p>昨日提现金额 &nbsp;&nbsp;{{dataTool.embodyyesterday}}</p>
                <p>今日提现金额 &nbsp;&nbsp;{{dataTool.embodytoday}}</p>
              </div>
            </div>
          </div>
      </div>

      <div>
        <h4 style="color:#33CCCC">交易趋势与明细</h4>
        <hr><br>
        <el-form size="mini" :inline="true">
          <el-form-item class="input_co"   label="">
            <el-select v-model="lineChartSerach.timespan" @change="selectDaysChange" placeholder="最近7天">
              <el-option value="1" label="最近7天">最近7天</el-option>
              <el-option value="2" label="最近15天">最近15天</el-option>
              <el-option value="3" label="最近30天">最近30天</el-option>
              <el-option value="4" label="3个月">3个月</el-option>
              <el-option value="5" label="6个月">6个月</el-option>
              <el-option value="6" label="12个月">12个月</el-option>
            </el-select>
          </el-form-item>
        <el-form-item prop="start" class="input_co"  label="选择日期">
          <el-date-picker class="input_s" @change="changeMonth" v-model="lineChartSerach.yearmonth" type="month" placeholder="" value-format="yyyy-MM"></el-date-picker>
        </el-form-item>
        <!--<el-form-item prop="end" class="input_co1"   label="——">
          <el-date-picker class="input_s"  v-model="formInline.end" type="datetime" placeholder="" value-format="timestamp"></el-date-picker>
        </el-form-item  >-->
        <el-button size="mini" @click="queryLineChart()" icon="el-icon-search">查询</el-button>
        </el-form>
        <!--<div id="myChart" :style="{width: '300px', height: '300px'}"></div>-->
        <div id="echartContainer" style="width:90%; height:500px"></div>
      </div>

    <div class="filter-container bor-container">

      <el-form size="mini" :inline="true">
        <el-form-item class="input_co"   label="用户昵称">
           <el-input v-model="formInline.nickname" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="input_co"   label="用户ID">
          <el-input v-model="formInline.userid" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="input_co"   label="类型">
          <el-select v-model="formInline.querytype" placeholder="">
            <el-option value="2" label="提现">提现</el-option>
            <el-option value="1" label="充值">充值</el-option>
          </el-select>
        </el-form-item><br/>
        <el-form-item class="input_co"   label="手机号">
          <el-input v-model="formInline.phone" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="input_co"   label="订单号">
          <el-input v-model="formInline.order" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="input_co"   label="交易渠道">
        <el-select v-model="formInline.paytype" placeholder="">
          <el-option  value="0" label="微信">微信</el-option>
          <el-option  value="1" label="支付宝">支付宝</el-option>
        </el-select>
      </el-form-item>
        <el-form-item prop="begintime" class="input_co"   label="选择日期">
          <el-date-picker class="input_s"  v-model="formInline.begintime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
       <el-form-item prop="endtime" class="input_co1"   label="——">
          <el-date-picker class="input_s"  v-model="formInline.endtime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item  >
        <el-button size="mini" @click="query()" icon="el-icon-search">查询</el-button>
        <el-button size="mini" @click="exportExcel()">导出excel</el-button>
      </el-form>
    </div>
    <!--<div class="filter-container btn-right">
      <el-button size="mini"  type="primary" @click="dialog.status = true" icon="el-icon-plus">添加banner图</el-button>
    </div>-->
    <el-table v-loading="loading" border :data="tableData">
        <el-table-column prop="order" label="订单号">

        </el-table-column>
        <el-table-column prop="transaction" label="交易流水">

        </el-table-column>
        <el-table-column prop="payment" label="交易渠道">
            <template slot-scope="scopt">
                <el-tag type="success" size="mini" v-if="scopt.row.payment == 0">微信</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scopt.row.payment == 1">支付宝</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称">

        </el-table-column>
        <el-table-column prop="create_time" label="类型">
            <template slot-scope="scopt">
                <el-tag type="success" size="mini" v-if="scopt.row.querytype == 1">充值</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scopt.row.querytype == 2">提现</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="money" label="金额">

        </el-table-column>
        <el-table-column prop="createtime" label="创建时间">

        </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-right"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.page"
      :page-sizes="[10]"
      :page-size="formInline.pagenum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total">
    </el-pagination>
    </div>
</template>
<script>
  import {getOrderMoneyAPI , getTransationByDayAPI , getRechargeWithdrawAPI , getExportExcelAPI} from '@/api/tradingcenter'
  import { mapGetters } from 'vuex'
  var echarts = require('echarts')
  //import moment from 'moment'
  export default {
    // 角色管理
    name: 'TradingOverview',
    data() {
      return {
        formInline: {
          nickname: '',
          page: 0,
          userid:'',
          pagenum: 10,
          total: 0,
          querytype:'1', // 默认是充值
          paytype:'0', // 默认微信
          orderno:'' // 订单号
        },
        dataDay:['周一','周二','周三','周四','周五','周六','周日'],
        myChart:'',
        lineChartSerach:{
          /*begintime:'',
          endtime:''*/
          yearmonth:'',
          timespan:'1'
        },
        embody:[], // 提现
        order:[], // 充值
        dataTool:{ // 页面顶部汇总数据
          orderincometotal: '',
          orderincomeyesterday: '',
          orderincometoday: '',
          embodytotal: '',
          embodyyesterday: '',
          embodytoday: ''
        },
        dialog: {
          status: false,
          id: null
        },
        loading: false,
        tableData: [],
      }
    },
    computed: {
      ...mapGetters([
        'buttons',
      ])
    },
    methods: {
      selectDaysChange(){
        this.lineChartSerach.yearmonth = ''
      },
      changeMonth(){
        this.lineChartSerach.timespan = ''
      },
      // 打开编辑页面
      openEdit(obj) {
        this.dialog.id = obj.id
        this.dialog.status = true
      },
      // 操作成功更新列表
      success() {
        this.getRechargeWithdrawList()
      },
      close() {
        this.dialog.status = false
        this.dialog.id = null
      },
      // 折线图的查询事件
      queryLineChart(){
        getTransationByDayAPI(this.lineChartSerach).then(res => {
            if (res.code === 0) {
              let newDayArray=[];
              let dayArray = res.data.order
              let embodyArray = res.data.embody
              for(let i=0;i<dayArray.length;i++){ // 充值的数据
                newDayArray.push(dayArray[i].createtime) // 获取横坐标的值
                this.order.push(dayArray[i].moneysum)
              }
              for(let j=0;j<embodyArray.length;j++){ // 提现的数据
                this.embody.push(embodyArray[j].moneysum)
              }
              this.dataDay = newDayArray
              this.myChart.setOption({
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: newDayArray
                },
                series: [
                  {
                    name:'提现',
                    type:'line',
                    stack: '总量',
                    data:this.embody
                  },
                  {
                    name:'充值',
                    type:'line',
                    stack: '总量',
                    data:this.order
                  }
                ]
              })
            } else {
              this.$message.error(res.msg)
            }
          })
      },
      // 点击查询事件
      query() {
        this.formInline.page = 1
        this.getRechargeWithdrawList()
      },
      // 导出事件
      exportExcel() {
        getExportExcelAPI(this.formInline).then(res => {
          let blob = new Blob([res], {type: "application/vnd.ms-excel"});
          let objectUrl = URL.createObjectURL(blob);
          var downloadA = document.createElement('a');
          downloadA.href = objectUrl;
          downloadA.download = "file";
          downloadA.click();
          window.URL.revokeObjectURL(downloadA.href);
          //window.location.href = objectUrl;
          /*if (res.code === 0) {
           // this.dataTool = res.data
          } else {
            this.$message.error(res.msg)
          }*/
        })
      },
      // pageSize发生改变触发
      handleSizeChange(val) {
        this.formInline.pageNum = 1
        this.formInline.pageSize = val
        this.getRechargeWithdrawList()
      },
      // pageNum 发生改变触发
      handleCurrentChange(val) {
        this.formInline.page = val
        this.getRechargeWithdrawList()
      },
      // 获取提现金额
      getSumMoney(){
        // 获取页面顶部的汇总数据
        getOrderMoneyAPI().then(res => {
            if (res.code === 0) {
              this.dataTool = res.data
            } else {
              this.$message.error(res.msg)
            }
          })
      },
      // 获取列表
      getRechargeWithdrawList() {
        this.loading = true
        getRechargeWithdrawAPI(this.formInline).then(res => {
          this.loading = false
          if (res.code === 0) {
            this.tableData = res.data.list
            this.formInline.total = res.data.total;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      echartsSetOption(){
        // 绘制图表
        this.myChart.setOption({
          title: {
            text: '交易趋势与明细'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['提现','充值']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dataDay
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'提现',
              type:'line',
              stack: '总量',
              data:[25, 35, 45, 55, 65, 75, 85]
            },
            {
              name:'充值',
              type:'line',
              stack: '总量',
              data:[28, 38, 48, 58, 68, 78, 88]
            }
          ]
        });
      }
    },

    mounted() {
      this.getSumMoney()
      this.getRechargeWithdrawList();
      // 基于准备好的dom，初始化echarts实例
       this.myChart = echarts.init(document.getElementById('echartContainer'));
       this.echartsSetOption();
       this.queryLineChart();
    }
  }
</script>
<style>
  .trading_head{
    background: #33CCCC;
    height: 133px;
    color: white;
    padding: 11px;
  }
.head_two{
  width:49%;
  height:120px;
  float:left;
}
  .down{
    margin-left:20px;
  }
  .down_left{
    float: left;
    margin-top: -9px
  }
  .down_right{
    float: left;
    margin-right: 20px;
    margin-top: 11px;
    font-size: 32px;
  }
</style>
